<template>
  <div class="my_c">
    <div class="my_aTop">当前位置: 个人中心--库存管理</div>
    <div class="my_top">
      <div class="item">
        <span>查询时间：</span>
        <div class="block">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="~"
            start-placeholder="2020-10-09 21 "
            end-placeholder="2022-10-09 21"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="item">
        <span>学期：</span
        ><el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="item">
        <span>院系：</span
        ><el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="item">
        <span>专业：</span
        ><el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="item">
        <span>班级：</span
        ><el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="my_top1">
      <div class="item">
        <span>图书名称: </span
        ><el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="search">搜索</div>
      <div class="cz">重置</div>
    </div>
  <Table/>
  </div>
</template>

<script>
import Table from "../../../components/table"
export default {
   components:{
Table
   },
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value1: '',
      value: '',
      value2: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.my_c{
  height:697px;
  background: #ffff;
}
.my_aTop {
  height: 39px;
  background: #960006;
  color: #ffff;
  line-height: 39px;
  padding-left: 30px;
}
.my_top {
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: space-around;
  .item {
    display: flex;
    align-items: center;
    font-size: 14px;
  }
}
.my_top1 {
  display: flex;
  align-items: center;
  .item{
    padding-left:8px;
  }
  .search {
    width: 90px;
    height: 30px;
    background: #f3e3e4;
    border: 1px solid #8a8a8a;
    border-radius: 14px;
    text-align: center;
    line-height: 28px;
    margin: 0 5px;
    font-size: 14px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #000000;
  }
  .cz {
    width: 90px;
    height: 30px;
    background: #960006;
    border: 1px solid #8a8a8a;
    border-radius: 14px;
    text-align: center;
    line-height: 28px;
    font-size: 14px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
  }
}
/deep/ .el-date-editor--daterange{
  width:244px;
  height:40px;
}
/deep/ .el-select .el-input__inner{
  width: 100px;
  height: 30px;
  background: #ffffff;
  border: 1px solid #d5d5d5;
}
/deep/ .el-input__icon{
  line-height: none;
}
/deep/ .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input{
    height: 30px;
    line-height: 30px;
}
/deep/ .el-range-separator{
  line-height: 22px;
}
/deep/ .el-range__icon{
  line-height: 2px;
}
</style>